package com.csw.compose.ui.module.component.base

import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.selection.selectable
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.RadioButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.csw.compose.theme.pagePadding
import com.csw.compose.ui.Destination
import com.csw.compose.ui.components.BodyText
import com.csw.compose.ui.components.LabelText
import com.csw.compose.ui.components.NormalSpacer
import com.csw.compose.ui.components.PrimaryTitle
import com.csw.compose.ui.components.UlItem
import com.csw.compose.ui.module.BasePage

@Preview
@Composable
fun RadioButtonPagePreview() {
    BasePage({}, "单选按钮") {
        RadioButtonPage()
    }
}

class RadioButtonPageData {
    companion object : Destination("RadioButtonPage")
}

/**
 *[参考](https://developer.android.google.cn/develop/ui/compose/components/radio-button?hl=zh-cn)
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun RadioButtonPage() {
    Column(
        modifier = Modifier
            .padding(horizontal = pagePadding)
            .verticalScroll(rememberScrollState())
    ) {
        PrimaryTitle("简介")
        BodyText("单选按钮，用于从多个选项中选择一个的场景")

        NormalSpacer()
        val items = remember { listOf("one", "two", "three") }
        val (selectedItem, selectedItemSetter) = remember { mutableStateOf(items[0]) }
        Column(
            Modifier.selectableGroup()//无障碍服务可以通过这个设置得知该组件是一个可选择列表
        ) {
            items.forEach {
                Row(
                    Modifier
                        .fillMaxWidth()
                        .height(56.dp)
                        .selectable(
                            selected = (it == selectedItem),
                            onClick = { selectedItemSetter(it) },
                            role = Role.RadioButton//告知无障碍服务此组件作为一个单选按钮
                        ),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    RadioButton(
                        it == selectedItem,
                        onClick = null//不设置点击事件，以整个row作为可点击项
                    )
                    Text(
                        text = it,
                        style = MaterialTheme.typography.bodyLarge,
                        modifier = Modifier.padding(start = 16.dp)
                    )
                }
            }
        }
        UlItem("RadioButton")
        LabelText("单选按钮，与系统View不同，此组件不包含文本设置选项，以上例子简单介绍了如何将其他组件声明为RadioButton")
    }
}